<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="学习跟踪">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="trace-wrap">
            <cube-scroll :data="recentCommentList">
                <div class="chart-area">
                    <div class="title">成绩登记</div>
                    <div class="chart-box">
                        <div class="main" ref="main" :style="chartSize"></div>
                    </div>
                </div>
                <div class="upload-area">
                    <div class="upload-tips">
                        学生完成了期中或期末考试之后，将卷面成绩或分数条拍照上传。
                    </div>
                    <div class="upload-wrap">
                        <cube-upload v-model="uploadFileList" ref="upload" class="upload-block" :multiple="false" :max="1" :action="uploadAction" :simultaneous-uploads="1" @files-added="filesAdded"></cube-upload>
                    </div>
                    <div class="upload-btn" @click="submitScore">提 交</div>
                </div>
                <div class="comment-wrap">
                    <div class="title">老师点评</div>
                    <div class="no-data" v-if="recentCommentList.length===0">暂无教师评论！</div>
                    <div class="comment-list" v-else>
                        <div class="comment-item" v-for="(recentComment,index) in recentCommentList" :key="index">
                            <div class="comment-teach">{{recentComment.TeacherName}}</div>
                            <div class="comment-content">{{recentComment.Comment}}</div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import NavBar from "@/components/aui/NavBar.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";
    import * as echarts from "echarts";

    @Component({
        components: {
            NavBar
        }
    })
    export default class CourseTrace extends Scene {

        private chartMain: any = "";
        private chartObj: any = "";
        private chartSize: { width: string, height: string } = {width: "10px", height: "20px"};
        private newScoreList: string[] = [];
        private uploadFileList: any = [];
        private recentCommentList: any = [];
        @State("UserStore")
        public user!: InterfaceUser;


        private back(): void {
            this.navigateBack();
        }

        public mounted() {
            this.chartSize = {width: `${document.body.clientWidth - 20}px`, height: `${(document.body.clientWidth - 20) * .7}px`};
            this.$nextTick(() => {
                this.chartMain = (<any> this).$refs.main;
                this.chartData();
            });

        }

        private async chartData(): Promise<any> {
            const newScoreListRes = await Http.get(this.api.newScoreList, CommonUnit.argumentWithUser(this.user));
            const recentCommentRes = await Http.get(this.api.getRecentlyComment, CommonUnit.argumentWithUser(this.user));
            if (newScoreListRes.Success) {
                this.newScoreList = newScoreListRes.Data;
                this.recentCommentList = recentCommentRes.Data || [];
                this.chartMain = this.genChart();
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "warn",
                    time: 1500,
                    txt: "数据获取错误",
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(newScoreListRes)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }
        }

        private genChart(): any {
            const charts = echarts.init(this.chartMain);
            const chartOption: object = {
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 10,
                    top: 40,
                    containLabel: true
                },
                color: ["#ff9800", "#ff6000", "#379aff"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    type: "scroll",
                    top: 0,
                    left: "10px",
                    right: "10px",
                    data: (<any> this).newScoreList.legend //对应入学，期中，期末的考试类型数据
                },
                calculable: true,
                xAxis: [{
                    type: "category",
                    axisTick: {
                        show: false
                    },
                    data: (<any> this).newScoreList.xAxis // 对应科目的数据
                }],
                yAxis: [{
                    type: "value"
                }],
                series: JSON.parse(String((<any> this).newScoreList.series)).data
            };
            charts.setOption(chartOption);
            return charts;
        }

        private filesAdded(files: any): void {
            console.log(files);
            // (<any> this).$refs.upload.removeFile(files);
            let hasIgnore: boolean = false;
            const maxSize: number = 2 * 1024 * 1024; // 1M
            for (let k in files) {
                const file = files[k];
                if (file.size > maxSize) {
                    file.ignore = true;
                    hasIgnore = true;
                }
            }
            hasIgnore && (<any> this).$createToast({
                type: "warn",
                time: 1000,
                txt: "上传的图片超过2M，请选择更小的照片"
            }).show();
        }

        private get uploadAction(): object {
            return {
                target: this.api.submitScoreImg,
                fileName: "picFile",
                data: CommonUnit.argumentWithUser(this.user),
                withCredentials: true,
                checkSuccess: (res: any) => {
                    if (!res.Success) {
                        (<any> this).$createToast({
                            type: "warn",
                            time: 1000,
                            txt: res.Message
                        }).show();
                        (<any> this).$refs.upload.removeFile(this.uploadFileList[0]);
                    }
                    return res.Success;
                }
            };
        }

        private submitScore() {
            if (this.uploadFileList.length > 0) {
                (<any> this).$createToast({
                    type: "correct",
                    txt: "提交成功，正在返回",
                    onTimeout: () => {
                        this.back();
                    }
                }).show();
            } else {
                (<any> this).$createToast({
                    type: "warm",
                    txt: "未选择照片，请选择后方可提交",
                }).show();
            }

        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;

    .trace-wrap
        width 100vw;
        height 100vh;
        padding-top calc(44px + env(safe-area-inset-top));

        .chart-area, .comment-wrap
            padding 10px;
            background #fff;
            margin-top 10px;

            .title
                margin-bottom 20px;
                background $theme-common-color;
                font-size 13px;
                border-radius 35px;
                width 120px;
                line-height 27px;
                text-align center;
                color #fff;

        .chart-area
            .chart-box
                width 100%

        .upload-area
            padding 10px 30px;
            background #fff;
            margin-top 10px;

            .upload-tips
                font-size 12px;
                padding-left 18px;
                padding-top 10px;
                position relative;
                color #8f8f94;
                line-height 18px;

                &:before
                    content '注:';
                    display block;
                    left 0;
                    top 10px;
                    position absolute;

            .upload-wrap
                margin-top 20px;
                background-color #fff;
                line-height 20px;
                font-size 17px;
                overflow hidden;
                position relative;

                &:before
                    content " ";
                    position absolute;
                    left 0;
                    right 0;
                    height 1px;
                    color #e5e5e5;
                    z-index 2;
                    top 0;
                    border-top 1px solid #e5e5e5;

                .upload-block
                    margin 10px 0;

                    >>> .cube-upload-btn-def
                        &::after
                            border 1px solid #d9d9d9;

                        i
                            &::before, &::after
                                background-color #d9d9d9

            .upload-btn
                margin 0 0 10px 0
                border-radius 38px;
                height 38px;
                line-height 38px;
                color #fff;
                text-align center;
                background $theme-common-color

        .comment-wrap
            .comment-list
                width 100%;

                .comment-item
                    display flex;
                    position relative;
                    justify-content space-between;
                    border-bottom 1px solid #ddd;
                    padding 5px 0;
                    color #333;

                    .comment-teach
                        width 60px;
                        word-wrap: break-word
                        color #666;

                    .comment-content
                        width calc(100% - 75px);
                        line-height 1.5;
                        word-wrap: break-word;
                        font-size 14px;
</style>
